<!-- GoodsContain 商品包含 -->
<template>
  <view>
    <view class="GoodsContain mt15">
      <!-- <view class="title">包含{{ list.length }}件商品</view> -->
      <view class="title mb15">商品包含</view>
      <view class="mt20">
        <view class="flex-m" v-for="(item, index) in info.package" :key="index">
          <view class="flex-1">{{ item.name }}</view>
          <view class="fc9 mr40">({{ item.number }}份)</view>
          <view class="fc9 money">￥{{ getMoney(item) }}</view>
        </view>
      </view>
    </view>

    <view
      v-if="(info.mallType === '2' || info.mallType === '3') && showShop"
      class="goods-contain__attr"
    >
      <view class="fs32 b mb10">适用门店</view>
      <view v-for="(item, index) in info.merchandiseBusiness" :key="index">
        <view
          class="merchandise-item flex flex-m"
          v-if="item.merchandiseRelationType !== '2'"
        >
          <view class="flex-1">
            <view v-for="_item in item.merchandiseData" :key="_item.id">
              <view>{{ _item.name }}</view>
              <goods-contain-cell label="有效期:" :value="_item.validity" />
            </view>
            <!-- <view v-if="list.length > 1" class="mb10 fs32">{{ item.name }}</view> -->
            <view class="mb10">{{ item.businessName }}</view>
            <view
              class="fc9 fs24 mb10"
              v-for="(ad, adi) in item.address"
              :key="adi"
              >{{ ad }}</view
            >
          </view>
          <view @click="onPhone(item.serviceMobile)">
            <view class="phone-right flex flex-m flex-c">
              <u-icon name="phone-fill" color="#fff" class="dib"></u-icon>
            </view>
            <view class="fc9 fs24 mt5">电话</view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="goods-contain__attr"
      v-if="
        (info.mallType === '1' || info.mallType === '3') &&
        info.attribute.length
      "
    >
      <view class="fs32 b mb15">商品属性</view>
      <!-- 自定义说明的显示。 按影城套票编辑中的自定义补差说明显示 -->
      <view v-if="info.exempt">{{ info.exempt }}</view>

      <view
        v-for="(item, index) in info.attribute"
        :key="index"
        class="zm-border pt10"
      >
        <view v-if="info.package.length > 1" class="mb10 fs32">{{
          item.name
        }}</view>
        <view
          class="mt30 mb30"
          v-if="item.customDifferencesDesc && item.differencesDescType !== '1'"
          >{{ item.customDifferencesDesc }}</view
        >
        <template v-if="item.differencesDescType !== '2'">
          <goods-contain-cell
            v-if="item.serviceMobile"
            label="商家电话:"
            :value="item.serviceMobile"
          />
          <!-- merchandiseRelationType为2不展示适用门店-->
          <goods-contain-cell
            v-if="item.address && item.merchandiseRelationType != '2'"
            label="可用门店:"
            :value="item.address"
          />
          <goods-contain-cell
            v-if="item.validity"
            label="有效期:"
            :value="item.validity"
          />
          <goods-contain-cell
            v-if="item.film"
            label="可用影片:"
            :value="item.film"
          />
          <goods-contain-cell
            v-if="item.screeningType"
            label="可用场次:"
            :value="item.screeningType"
          />
          <goods-contain-cell
            v-if="item.hallType"
            label="可用影厅:"
            :value="item.hallType"
          />
          <goods-contain-cell
            v-if="item.copyType"
            label="可用制式:"
            :value="item.copyType"
          />
          <!-- <GoodsContainCell label="限购数量:" :value="item.purchase" /> -->
          <goods-contain-cell
            v-if="item.diffRule"
            label="补差说明:"
            :value="item.diffRule"
          />
          <goods-contain-cell
            v-if="item.cinema"
            label="可用影城:"
            :value="item.cinema"
          />
          <view v-if="item.isUnUse === '1'">
            <view class="fs32 b mb15">以下情况不可用</view>
            <goods-contain-cell
              v-if="item.unUseScreeningType"
              label="不可用场次:"
              :value="item.unUseScreeningType"
            />
            <goods-contain-cell
              v-if="item.unUseHallType"
              label="不可用影厅:"
              :value="item.unUseHallType"
            />
            <goods-contain-cell
              v-if="item.unUseCopyType"
              label="不可用制式:"
              :value="item.unUseCopyType"
            />
            <goods-contain-cell
              v-if="item.unUseCinema"
              label="不可用影城:"
              :value="item.unUseCinema"
            />
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import GoodsContainCell from './GoodsContainCell.vue'
  import { toFixed } from '@/utils'
  export default {
    name: 'goods-contain',
    components: { GoodsContainCell },
    props: {
      info: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    computed: {
      showShop() {
        let count = 0
        this.info.merchandiseBusiness.forEach((item) => {
          if (item.merchandiseRelationType != '2') {
            count++
          }
        })
        return count > 0
      }
    },
    methods: {
      // 初始化方法
      onPhone(phone) {
        console.log('传入的电话', phone)
        const res = uni.getSystemInfoSync()
        console.log(res)
        // ios系统默认有个模态框
        if (res.platform == 'ios') {
          uni.makePhoneCall({
            phoneNumber: phone,
            success() {
              console.log('拨打成功了')
            },
            fail() {
              console.log('拨打失败了')
            }
          })
        } else {
          uni.showActionSheet({
            itemList: [phone, '呼叫'],
            success: function (res) {
              if (res.tapIndex == 1) {
                uni.makePhoneCall({
                  phoneNumber: phone
                })
              }
            }
          })
        }
      },
      getMoney(item) {
        return toFixed(item.number * item.salePrice)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .goods-card__container {
    // width: calc(100% - 30upx);
    // padding-left: 30upx;
    white-space: nowrap;
  }

  .goods-contain__attr {
    .merchandise-item {
      border-bottom: 1px solid #fbf3f3;
      padding: 15rpx 0 30rpx;
      & + .merchandise-item {
        margin-top: 15rpx;
      }
      .phone-right {
        // display: inline-block;
        width: 50rpx;
        height: 50rpx;
        // text-align: center;
        // line-height: 50rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #55bbff, #26e4d9);
      }
    }
  }
  .GoodsContain {
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    .title {
      font-weight: bold;
      font-size: 32rpx;
    }
    .money {
      width: 120rpx;
      text-align: end;
    }
  }

  .goods-contain {
    &__attr {
      margin-top: 20rpx;
      background: #fff;
      padding: 30rpx;
      font-size: 28rpx;
      color: #222;
    }
  }
</style>
